<template>
  <view class="answer">
    <answer-card>
      <view class="answer-content first-card">
        <text class="first-card-title">{{ title }}</text>
        <text class="first-card-itme">{{ activity_date }}</text>
        <text class="first-card-start">开始答题</text>
        <text class="first-card-icon">></text>
      </view>
    </answer-card>
    <!-- Select -->
    <answer-card>
      <view class="problem">  {{current_questions.current_question_index_display}}、({{ current_questions.type_info }}) {{ current_questions.content }}</view>
      <view style="margin-bottom: 60rpx">
        <view
          @tap="chooseAnswer(index)"
          class="answer-content"
          v-for="(item, index) in current_questions.optional"
          :key="index"
          style="background-color: #ccc;"
        >
          <view
            :class="` ${current_selected_answer_index == index ? 'select' : ''}`"
            style="
              width: 24rpx;
              height: 24rpx;
              display: inline-block;
              margin-left: 5rpx;              
            "
          ></view><text style="margin-left: 20rpx">{{item.flag}}、{{item.content}}</text>
        </view>
      </view>
    </answer-card>
        <!-- @tap="()=>{show=false}" -->
    <view v-if="show_submit" class="btn" @tap="selfSubmit">提 交</view>
    <view v-if="show_next" class="btn" @tap="nextQuestion">下一题</view>    
    <view v-if="show" class="mask">
      <view class="mask-content">
        <answer-card>
          <view class="answer-content">
            <text class="title">恭喜您获得手机话费100元券</text>
            <view class="answer-content-info">
              <image :src="img1"></image>
              <view class="answer-content-info-text">
                <view class="info-title"
                  ><text>手机话费100元券</text></view
                >
                <text class="info-category">三大运营商通用</text>
                <view class="info-time">2020.7.30-2020.12.31</view>
              </view>
            </view>
            <view class="answer-content-tip">
              可与其它活动优惠同时享受。在线支付专享。
            </view>
          </view>
        </answer-card>
      </view>
    </view>
  </view>
</template>

<script>
  import "./index.scss";
  import Taro, { getCurrentInstance } from "@tarojs/taro";
  import answerCard from "../../../components/answerCard/index";
  import img1 from "../../../assets/image/build1.png";
  import consumerbg from "../../../assets/image/consumer-bg.png";
  import requset from '../../../utils/request';
  import formatTime from "../../../utils/formatTime";
  import {getToken} from '../../../utils/token';
  // width: 168px;
  // height: 112px;
  // border-radius: 8px;
  export default {
    components: {
      "answer-card": answerCard,
    },
    data() {
      return {
        // consumerbg:consumerbg,
        openid: "",
        right_answer_num: 0,
        detailId: "",
        title: "",
        activity_date: "",
        questions: [],
        questions_answer: [], //带回答的问题列表
        current_questions: {}, //当前的问题
        current_question_index: 0, //当前的问题列表序号
        current_selected_answer_index: -1, //当前选择的问题序号

        show_next: true,
        show_submit: false,
        img1: img1,
        show: false,
      };
    },

    mounted() {
      
    },    

    created() {
      this.openid = getToken();
      //console.log("查看store===www====", this.openid);
      //console.log("=======", getCurrentInstance().router.params.id, "_++++");
      const detailId = getCurrentInstance().router.params.id;
      this.detailId = detailId;
      this.getRlueDetail(this.detailId);
    },
    methods: {

      setTitle() {
        wx.setNavigationBarTitle({
          title: this.title,
        });
      },
      // getAnswerList
      onSelectanswer(a, b) {    
        console.log(this.selectlist);
        let arr = [...this.selectlist];
        arr[a] = b;
        this.selectlist = arr;
      },

      getRlueDetail(id){
          requset('get',`/api/rest/activity_batch/${id}.htm`).then((res)=>{
            //console.log(res,'getRlueDetail');
            this.title = res.title;
            this.questions = res._question_list;
            this.questions_answer = res._question_list;           
            this.activity_date = formatTime(res.start_dtt, "yyyy-mm-dd h:m:s") + "——" + formatTime(res.end_dtt, "yyyy-mm-dd h:m:s");
            this.setTitle();
            this.initQuestion();
            //this.data = res
          })
      },

      chooseAnswer(index) {
        this.current_selected_answer_index = index;
      },

      initQuestion()
      {
        this.current_questions = this.questions[this.current_question_index];
        let type_info = "";
        let current_questions_temp = JSON.parse(JSON.stringify(this.current_questions));
        //console.log("__===好还了啊", current_questions_temp["type"]);
        switch(current_questions_temp["type"])
        {
          case "judge":
            type_info = "判断题";
          break;
          case "choice":
            type_info = "单选题";
          break;
          case "mchoice":
            type_info = "多选题";
          break;    
        }
        current_questions_temp["type_info"] = type_info;
        current_questions_temp["current_question_index_display"] = this.current_question_index + 1;
        this.current_questions = current_questions_temp;
      },

      nextQuestion() {        
        if(this.current_questions.optional[this.current_selected_answer_index]["flag"] == this.current_questions["right_answer"])
        {
          this.right_answer_num++;
          console.log("答题正确", this.right_answer_num); 
          if(this.current_question_index < (this.questions.length-1))
          {
            this.current_question_index++;
            this.current_selected_answer_index = -1;            
            console.log(this.right_answer_num);
            this.initQuestion();
            if(this.current_question_index == (this.questions.length-1))
            {
              this.show_submit = true;
              this.show_next = false;    
            }         
          }
        }else{
          //console.log("答题错误");
          this.show_submit = false;
          this.show_next = false;
          this.getCoupun(); 
          console.log("答题错误，准备提交答题");         
        }
        //right_answer_num
      },

      //获取优惠券
      getCoupun()
      {
        console.log("哈哈哈", this.openid);
        if("" == this.openid || null == this.openid || undefined == this.openid)
        {
          wx.showToast({
          title: '登录失效，请重新进入小程序再进行尝试',
          icon: 'none',
          duration: 2000
        })
          return;
        }else{
          let detailId_temp = this.detailId;
          requset('get',`/api/rest/activity_answer/${this.detailId}.htm`, {
            openid: this.openid,
            answer_count: this.current_question_index + 1,
            right_answer_count: this.right_answer_num
          }).then((res)=>{
            let flag = parseInt(res.flag);
            if(100 == flag)
            {
              wx.showModal({
                title: '提示',
                content: res.note,
                success (res) {
                  if (res.confirm) {                    
                  } else if (res.cancel) {                    
                  }
                }
              })
            }else{
              wx.showModal({
                title: '提示',
                content: res.note + "。确认重新做题吗",
                success (res) {
                  if (res.confirm) {
                    Taro.navigateTo({ url: `/pages/consumer/answer/index?id=${detailId_temp}` });
                  } else if (res.cancel) {
                    
                  }
                }
              })
            }
            console.log(res);
          })
          console.log("答题结束，获取优惠券");
        }
        
      },

      selfSubmit() {
        if(this.current_questions.optional[this.current_selected_answer_index]["flag"] == this.current_questions["right_answer"])
        {
          this.right_answer_num++;
        }
        console.log("准备提交答题");
        //this.nextQuestion();
        this.show_submit = false;
        this.show_next = false;         
        this.getCoupun();
        //this.show = true;
      },
      // toAnswer() {
      //   Taro.navigateTo({ url: "/pages/consumer/answer/index" });
      // },
    },
  };
</script>

<style>
</style>